import { Component, OnInit } from '@angular/core';
import 'zone.js';
import 'reflect-metadata';
import DataSet from '@antv/data-set';

const sourceData = [
  { item: '事例一', count: 40 },
  { item: '事例二', count: 21 },
  { item: '事例三', count: 17 },
  { item: '事例四', count: 13 },
  { item: '事例五', count: 9 }
];

const scale = [{
  dataKey: 'percent',
  min: 0,
  formatter: '.0%',
}];

const dv = new DataSet.View().source(sourceData);
dv.transform({
  type: 'percent',
  field: 'count',
  dimension: 'item',
  as: 'percent'
});
const data = dv.rows;

@Component({
  selector: 'app-antv-chart',
  templateUrl: './antv-chart.component.html',
  styleUrls: ['./antv-chart.component.scss']
})
export class AntvChartComponent implements OnInit {
  forceFit = true;
  height = 400;
  data = data;
  scale = scale;
  pieStyle = {
    stroke: '#fff',
    lineWidth: 1,
  };
  labelConfig = ['percent', {
    offset: -20,
    textStyle: {
      rotate: 0,
      textAlign: 'center',
      shadowBlur: 2,
      shadowColor: 'rgba(0, 0, 0, .45)'
    },
    formatter: (val, item) => {
      return '';
    },
  }];
  guideHtml =
    `<div style="color:#000000;font-size: 14px;text-align: center;width: 10em;">
    主机</div>`;
  guidePosition = ['50%', '50%'];
  constructor() { }

  ngOnInit() {
  }
}
